<template>
    <el-image :src="album.albumCover" style="height: 100px;border: 1px solid #eeeeee"
              @click="coverDialogVisible = true"></el-image>

    <el-dialog
            v-model="coverDialogVisible"
            title="修改封面"
            width="300px"
    >
        <el-upload
                class="avatar-uploader"
                name="albumCover"
                action="/api/album/uploadImg"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
        >
            <img v-if="uploadImageUrl" :src="getUploadImageUrl" class="avatar"/>
            <el-icon v-else class="avatar-uploader-icon">
                <Plus/>
            </el-icon>
        </el-upload>

        <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="editCover">
          确认
        </el-button>
      </span>
        </template>
    </el-dialog>


    <el-dialog
            v-model="addPicDialogVisible"
            title="添加图片"
            width="50%"
    >
        <el-upload
                v-model:file-list="fileList"
                name="picture"
                :multiple="true"
                action="/api/picture/addPicture"
                :data="{'albumId':albumId}"
                :show-file-list="true"
                list-type="picture-card"
                :on-success="handleAddSuccess"
                :before-upload="beforeAvatarUpload"
                :on-remove="handleRemove"
                :limit="10"
        >
            <img v-if="uploadImageUrl" :src="getUploadImageUrl" class="avatar"/>
            <el-icon v-else class="avatar-uploader-icon">
                <Plus/>
            </el-icon>
        </el-upload>

        <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeAddPicDialog">取消</el-button>
        <el-button type="primary" @click="savePictures">
          确认
        </el-button>
      </span>
        </template>
    </el-dialog>


    <el-divider direction="vertical"></el-divider>
    <div style="width: 400px;display: inline-block;">
        <h3 style="font-weight: bolder;color: #036b67">{{ album.albumName }}</h3> <br>
        <span>{{ album.albumDescription }}</span>
    </div>
    <el-divider direction="vertical"></el-divider>
    <el-button type="primary" @click="addPicDialogVisible=true">添加图片</el-button>
    <el-divider direction="vertical"></el-divider>
    <el-button :icon="Refresh" :loading="loading" @click="refresh">
        <span>刷新</span>
    </el-button>
    <el-divider></el-divider>

    <el-space wrap size="large">
        <el-card v-for="item in pictures" :body-style="{padding:0}" style="width: 200px">
            <template #header>
                <span class="picture-name">{{ item.pictureName }}</span>
            </template>
            <el-popover :width="400" placement="right">
                <template #reference>
                    <el-image fit="cover"
                              :src="item.pictureUrl"
                              style="width: 200px;height:120px;border: 1px solid #eeeeee"></el-image>
                </template>
                <el-image fit="cover"
                          :src="item.pictureUrl"
                          style="border: 1px solid #c5baba"></el-image>
            </el-popover>
            <el-tooltip
                    effect="dark"
                    content="彻底删除"
                    placement="bottom">
                <el-button text style="float: right;color: red" @click="deletePicture(item.pictureId)">
                    <el-icon>
                        <Delete/>
                    </el-icon>
                </el-button>
            </el-tooltip>

            <el-button text style="float: left;" @click="setAsCover(albumId,item.pictureUrl)">
                设为封面
            </el-button>

        </el-card>

    </el-space>

</template>

<script>
import {ElMessage} from "element-plus";

export default {
    name: "Picture",
    props: ['albumId'],
    created() {
        this.init()
    },
    computed: {
        getUploadImageUrl() {
            if (this.uploadImageUrl) {
                return "/api/" + this.uploadImageUrl
            } else {
                return ""
            }
        }
    },
    data() {
        return {
            selectedAlbumId: null,
            loading: false,
            pictures: [],
            uploadImages: [],
            album: {
                albumId: 0,
                albumCover: "",
            },
            coverDialogVisible: false,
            addPicDialogVisible: false,
            uploadImageUrl: "",
        }
    },
    methods: {
        init() {
            this.getAlbum()
            this.getPictures()
        },
        refresh() {
            this.loading = true
            this.init()
            this.loading = false
        },
        async getAlbum() {
            let {data: result} = await this.$http.get("/api/album/getAlbumById", {params: {id: this.albumId}})
            this.album = result
        },
        async getPictures() {
            let {data: result} = await this.$http.get("/api/picture/getPicturesByAlbumID", {params: {albumId: this.albumId}})
            this.pictures = result.dataMap.pictureList
        },
        async deletePicture(pictureId) {
            this.loading = true
            let {data: result} = await this.$http.get("/api/picture/deletePicture", {
                params: {
                    pictureId: pictureId,
                }
            })
            if (result.code !== 200) {
                ElMessage.error({
                    showClose: true, message: result.msg
                })
            } else {
                ElMessage.success({
                    showClose: true, message: result.msg
                })
            }
            this.refresh()
            this.loading = false
        },
        async setAsCover(albumId, pictureUrl) {
            this.loading = true
            let {data: result} = await this.$http.get("/api/picture/setAsCover", {
                params: {
                    albumId: albumId,
                    pictureUrl: pictureUrl
                }
            })
            if (result.code !== 200) {
                ElMessage.error({
                    showClose: true, message: result.msg
                })
            } else {
                ElMessage.success({
                    showClose: true, message: result.msg
                })
            }
            this.refresh()
            this.loading = false
        },
        // 取消按钮被点击
        closeDialog() {
            this.coverDialogVisible = false
            this.uploadImageUrl = ""
        },
        // 取消按钮被点击
        closeAddPicDialog() {
            this.uploadImages = []
            this.addPicDialogVisible = false
        },
        async editCover() {
            let item = {...this.album}
            item.albumCover = this.uploadImageUrl
            let {data: result} = await this.$http.post("/api/album/save", item)
            if (result.code === 400) {
                ElMessage.error({
                    showClose: true, message: result.msg
                })
            } else {
                ElMessage.success({
                    showClose: true, message: result.msg
                })
            }
            this.refresh()
            this.coverDialogVisible = false
        },
        // 保存上传的图片
        async savePictures() {
            let {data: result} = await this.$http.post("/api/picture/savePictures", {
                picList: this.uploadImages,
                albumId: this.albumId
            })
            if (result.code === 400) {
                ElMessage.error({
                    showClose: true, message: result.msg
                })
            } else {
                ElMessage.success({
                    showClose: true, message: result.msg
                })
            }
            this.refresh()
            this.closeAddPicDialog()
        },

        // 上传前检查文件格式和大小
        beforeAvatarUpload(rawFile) {
            let allowTypes = ['image/jpeg', "image/jpg", 'image/png', 'image/webp'];
            if (!allowTypes.includes(rawFile.type)) {
                ElMessage.error('文件格式不正确!')
                return false
            } else if (rawFile.size / 1024 / 1024 > 2) {
                ElMessage.error('文件大小不能大于 2MB!')
                return false
            }
            return true
        },
        // 上传成功修改预览
        handleAddSuccess(response) {
            console.log(response)
            let {code, dataMap} = response
            this.uploadImages.push(dataMap.pictureMap)
            // this.album.albumCover = dataMap.imgPath
        }
    }
}
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 200px;
    height: 200px;
    display: block;
    /*margin-left: 30px;*/
    border-radius: 20px;
}

.avatar-uploader {
    border: 1px solid #8c939d;
    border-radius: 20px;
    margin-left: 30px;
    height: 200px;
    width: 200px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    display: flex;
}


.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    align-items: center;
    text-align: center;
}

.picture-name {
    display: block;
    width: 160px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
</style>